import React, { forwardRef, useImperativeHandle } from 'react';
// 弹窗可以在 root 之外
import { createPortal } from 'react-dom';
import styles from './myHooks.module.css';

function MyModal(props, myRef) {
  // console.log(myRef, 'myRef')
  const { show, handleShowModal } = props;

  // 蒙层点击
  const maskClick = e => {
    e.stopPropagation();
    e.preventDefault();
    // console.log('maskClick', e)
    handleShowModal();
    return false;
  };
  // 模版弹窗点击
  const handleClick = e => {
    e.stopPropagation();
    e.preventDefault();
    console.log('模板中的方法点击！！！');
  };

  useImperativeHandle(
    myRef,
    () => ({
      maskClick: maskClick
    }),
    []
  );

  return (
    <div className={[styles.modalPositon, !show && styles.modalHide].join(' ')} onClick={maskClick}>
      <div className={[styles.modalWrap].join(' ')} onClick={handleClick}>
        MyModal
      </div>
    </div>
  );
}
export default forwardRef(MyModal);
